<template>
  <div class="main">
    <img src="../../assets/images/bannerTjfx.png" alt="" class="loginImg">

    <div class="regBox">

      <div class="userWords">
         <!--<p class="forTItleOne" style="font-weight: 700;font-size: 36px;letter-spacing: 10px;padding-left: 5px;"> 标识体系规模数据</p>
                <p class="forTItleOne"  style="font-weight: 700;font-size: 32px;letter-spacing: 10px;padding-left: 5px;">管理系统</p>-->
        <!--<p class="forTItleOne" style="font-weight: 700;font-size: 36px;letter-spacing: 10px;padding-left: 5px;"> 标识解析二级节点</p>-->
        <!--<p class="forTItleOne"  style="font-weight: 700;font-size: 32px;letter-spacing: 10px;padding-left: 5px;">数据统计分析系统</p>-->
        <p class="forTItleOne"  style="font-weight: 700;font-size: 32px;letter-spacing: 10px;padding-left: 5px;">订单查询系统</p>
<!--        <img src="../../assets/images/areaAdminIcon.png" alt="" style="width: 72%">-->

      </div>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="formBox">
        <el-form-item prop="username" class="itemList">
          <div class="imgItem">
            <img src="../../assets/images/userImg.png" alt="" class="userImg">
          </div>

          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="请输入用户名"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
            clearable
            class="myClass"
          />
        </el-form-item>
        <el-form-item prop="password" class="itemList">
          <div class="imgItem">
            <img src="../../assets/images/paddWord.png" alt="" class="userImg">
          </div>

          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="密码"
            name="password"
            tabindex="2"
            auto-complete="new-password"
            :show-password="true"
            class="myClass"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <!-- <el-form-item prop="code" class="itemList">
          <div class="imgItem">
            <img src="../../assets/images/checkCodeImg.png" alt="" class="userImg">
          </div>

          <el-input
            v-model="loginForm.code"
            type="text"
            autocomplete="off"
            placeholder="请输入验证码"
            class="myClass forCapt"
            style="width: 60%;padding-left: 35px"
          />
          <img :src="imgCode" class="capthImg" @click="changeImgCode">
        </el-form-item> -->
        <el-form-item class="remberBox" style="padding:0 30px">
          <img
            v-if="chooseFlag==false"
            src="../../assets/images/choose.png"
            alt=""
            class="remberImg"
            @click="choosePwd()"
          >
          <img
            v-if="chooseFlag"
            src="../../assets/images/choose_true.png"
            alt=""
            class="remberImg"
            style="width: 20px"
            @click="choosePwd()"
          >
          <span class="remWords">记住密码</span>
          <!--                        <span class="forgetWords">忘记密码？</span>-->
        </el-form-item>

        <el-form-item class="itemListTwo">
          <el-button class="loginBtn" @click.native.prevent="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="forIndus">工业互联网-打造第四次工业革命的基石</div> -->
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { getCaptche, checkCaptche } from '@/api/index'

export default {
  name: 'PubIndex',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码最少6位'))
      } else {
        callback()
      }
    }
    return {
      chooseFlag: false,
      loginForm: {
        username: '',
        password: '',
        code: ''
      },
      imgCode: '/api/ht/getCode.img',
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  created: {

  },
  mounted: function() {
    this.forTitle()
    var loginInfo = JSON.parse(localStorage.getItem('data'))
    if (loginInfo) {
      console.log(loginInfo)
      this.loginForm.username = loginInfo.username
      this.loginForm.password = loginInfo.pass
    } else {
      this.loginForm.username = ''
      this.loginForm.password = ''
    }
  },

  /*     watch: {
            $route: {
                handler: function (route) {
                    this.redirect = route.query && route.query.redirect
                },
                immediate: true
            }
        },*/
  methods: {
    choosePwd() {
      this.chooseFlag = !this.chooseFlag
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true

          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.changeImgCode()
            var storage = localStorage
            if (this.chooseFlag) {
              var data = {
                username: this.loginForm.username,
                pass: this.loginForm.password
              }
              var d = JSON.stringify(data)
              storage.setItem('data', d)
            } else {
              // storage.clear();
            }

            this.$router.push({ path: '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
            this.changeImgCode()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //
    // 点击图片修改图片src
    changeImgCode() {
      var num = Math.ceil(Math.random() * 100)// 生成一个随机数（防止缓存）
      this.imgCode = '/api/ht/getCode.img?cache=' + num
    },
    forTitle() { // 标识体系规模数据管理系统
      // document.title = '标识解析二级节点数据统计分析系统'
      document.title = '订单查询系统'
    }
  }
}
</script>

<style lang="scss" scoped>
    .capthImg {
        width: 140px;
        height: 48px;
        display: block;
        float: right;
        border: 1px solid #ccc;
    }

    /deep/ .el-input__inner {
        &::placeholder {
            color: rgba(70, 103, 182, 0.6);
        }

        &::-webkit-input-placeholder {
            /* WebKit browsers 适配谷歌 */
            color: rgba(70, 103, 182, 0.6);
        }

        &:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 适配火狐 */
            color: rgba(70, 103, 182, 0.6);
        }

        &::-moz-placeholder {
            /* Mozilla Firefox 19+ 适配火狐 */
            color: rgba(70, 103, 182, 0.6);
        }

        &:-ms-input-placeholder {
            /* Internet Explorer 10+  适配ie*/
            color: rgba(70, 103, 182, 0.6);
        }
    }

    /deep/ .el-form-item--small .el-form-item__error {
        padding-left: 70px;
    }

    /deep/ .myClass input.el-input__inner {
        border: none;
        outline: none;
        background: rgba(195, 212, 240, 0.5);
        color: #4667b6;
        padding-left: 70px;
    }

    /deep/ .myClass.forCapt input.el-input__inner {
        border: none;
        outline: none;
        background: rgba(195, 212, 240, 0.5);
        color: #4667b6;
        padding-left: 30px;
    }

    /deep/
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition-delay: 99999s;
        transition: color 99999s ease-out, background-color 99999s ease-out;
        -webkit-transition-delay: 99999s;
        -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
        -webkit-text-fill-color: #4667b6;
        font-size: 20px;
        color: #4667b6;
    }

    .loginImg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-size: 100%;
    }

    .regBox {
        padding: 0 30px 0;
        width: 600px;
        height: 450px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 5px #ccc;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(50% - 250px);
        margin: auto;
    }

    .rightImg {
        right: 0;
        top: 0;
    }

    .btnImg {
        left: 0;
        bottom: 0;
    }

    .botImg {
        right: 0;
        bottom: 0;
    }

    .userWords {
        line-height: 45px;
        font-size: 36px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
        padding: 30px 0 15px;
        text-align: center;
        color: #fff;
        width: 100%;
        font-weight: 600;
       /*background: linear-gradient(to bottom, #5f6ae1, #5b63cf);*/
       border-bottom: 1px solid #ccc;
    }
    .forTItleOne{
      background-image:-webkit-linear-gradient(bottom, #5f6ae1, #000, #000);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .userWords p {
        margin: 0;
        padding: 0;
      color: #fff;
        text-align: center;
      letter-spacing: 4px;
    }

    .formBox {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 135px;
        width: 85%;
    }

    .itemList {
        width: 85%;
        margin: auto;
        border: none;
        border-radius: 5px;
        margin-top: 25px;
        position: relative;
    }

    .itemListTwo {
        width: 85%;
        margin: auto;
        margin-top: 30px;
    }

    .imgItem {
        position: absolute;
        left: 0;
        top: 0;
        /*background: #0a80e4;*/
        width: 70px;
        height: 50px;
        z-index: 9;
    }

    .userImg {
        position: absolute;
        left: 25px;
        top: 12px;
        width: 25px;
        z-index: 10;
    }

    .myClass {
        border-radius: 15px;
        background: rgba(195, 212, 240, 0.5);
    }

    /deep/ .el-input--small {
        font-size: 20px;
    }

    /deep/ .el-input--small .el-input__inner {
        height: 50px;
        line-height: 50px;
        border-radius: 15px;
    }

    .remberBox {
        width: 90%;
        height: 30px;
        position: relative;
        color: white;
        font-size: 20px;
        margin-top: 10px;
    }

    .remberImg {
        position: absolute;
        left: 35px;
        top: 15px;
        width: 20px;
    }

    .remWords {
        position: absolute;
        left: 60px;
        top: 9px;
        color: #000;
    }

    /deep/ .remberBox.el-form-item__content {
        margin-left: 0;
    }

    .forgetWords {
        position: absolute;
        right: 20px;
        top: 2px;
        color: #00affb;
    }

    .loginBtn {
        width: 100%;
        height: 50px;
        margin: 0 auto 0;
        border: none;
        color: white;
        border-radius: 10px;
        letter-spacing: 15px;
        background: linear-gradient(to right, #535ec2, #535ec2);
        /*background: linear-gradient(to bottom, #24a32f, #64d77f);*/
        display: block;
        font-size: 18px;
        font-weight: 500;
    }

    .loginBtn:hover {
        color: white;
    }

    .refs {
        display: block;
        float: right;
    }

    .forIndus {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30px;
        width: 40%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: auto;
    }

    .forIndus:before {
        position: absolute;
        left: 25%;
        top: 15px;
        width: 30px;
        height: 2px;
        background: #aaa;
        content: '';
    }

    .forIndus:after {
        position: absolute;
        right: 25%;
        top: 15px;
        width: 30px;
        height: 2px;
        background: #aaa;
        content: '';
    }
</style>
